<template>
  <div class="course-module">
    <div class="white-module course-info">
      <div style="height: 1px"></div>
      <div class="evaluate">
        <div class="text-name">
          <div class="text"> {{ classRoom.classRoomEntity.title }} -1</div>
          <div class="img">
            <img src="@/assets/common/active_learn.png" /> {{ classRoom.courseEntity.title }}
          </div>
        </div>
        <div class="excel" v-if="activeName == 'second'" @click="fullScreen">全屏</div>
        <div class="excel" @click="downAnswerFile">导出全部</div>
      </div>
      <div class="scholl-tabs">
        <el-tabs v-model="activeName">
          <el-tab-pane label="课件" name="second" v-if="classRoom.classHour.files && classRoom.classHour.files.length>0"> </el-tab-pane>
          <el-tab-pane label="视频" name="first" v-if="classRoom.classHour.videos && classRoom.classHour.videos.length>0"> </el-tab-pane>
          <el-tab-pane label="辅助资料" name="third" v-if="classRoom.classRoomFileList && classRoom.classRoomFileList.length>0"> </el-tab-pane>
          <el-tab-pane label="教案" name="four" v-if="classRoom.classHourFileList && classRoom.classHourFileList.length>0"> </el-tab-pane>
        </el-tabs>

      </div>
      <div class="video global-scroll" v-if="activeName == 'first'">
        <block v-for="item in classRoom.classHour.videos">
          <video controls :src="item">
            your browser does not support the video tag
          </video>
        </block>
      </div>

      <div v-if="activeName == 'second'" class="global-table global-scroll">
        <div v-loading="loading">
          <block v-for="item in classRoom.classHour.files">
            <iframe class="iframe"
                    id="keynote"
                    name="keynote"
                    allowfullscreen="true"
                    webkitallowfullscreen="true"
                    mozallowfullscreen="true"
                    oallowfullscreen="true"
                    msallowfullscreen="true"
                    :src="item" @load="load">
            </iframe>
          </block>
        </div>
      </div>

      <div v-if="activeName == 'third'" class="global-table global-scroll">
        <el-table
            :data="classRoom.classRoomFileList"
            :max-height="tableHeight + 'px'"
            style="width: 100%"
        >
          <el-table-column prop="file" label="文件名" show-overflow-tooltip>
            <template #default="scope">
              <div class="folder">
                <img src="@/assets/classroom/folder.png" />{{ scope.row.name }}
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="url" label="大小" />
          <el-table-column label="操作" width="130" fixed="right">
            <template #default="scope">
              <el-button type="text" size="small" @click="downFile(scope.row.url)"> 预览 </el-button>
              <span class="slash">/</span>
              <el-button type="text" size="small" @click="downFile(scope.row.url,scope.row.name)"> 下载 </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div v-if="activeName == 'four'" class="global-table global-scroll">
        <el-table
            :data="classRoom.classHourFileList"
            :max-height="tableHeight + 'px'"
            style="width: 100%"
        >
          <el-table-column prop="file" label="文件名" show-overflow-tooltip>
            <template #default="scope">
              <div class="folder">
                <img src="@/assets/classroom/folder.png" />{{ scope.row.name }}
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="url" label="大小" />
          <el-table-column label="操作" width="130" fixed="right">
            <template #default="scope">
              <el-button type="text" size="small" @click="view(scope.row.url)"> 预览 </el-button>
              <span class="slash">/</span>
              <el-button type="text" size="small" @click="downFile(scope.row.url,scope.row.name)"> 下载 </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

    </div>

    <div class="white-module guide">
      <div class="title">
        <div class="name"><span class="line"></span>学习指导</div>
      </div>
      <div class="desc global-scroll" v-html="classRoom.classHour?classRoom.classHour.guide:''"></div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, Ref, nextTick, toRefs, toRef } from "vue";
import baseService from "@/service/baseService";
import {getCache, getToken} from "@/utils/cache";

/**
 * 接收父组件传来的值
 */
const userType = getCache('userType', { isSessionStorage: true }, {})
const props = defineProps({
  classRoom: {},
  classHourIndex: null
});

const loading = ref(false);
const fullScreenState = ref(false);
const activeName = ref("second");

const load = () => {
  loading.value = false;
  //判断tab选中状态
  if(classRoom.classHour.videos && classRoom.classHour.videos.length>0){
    activeName.value = 'first';
  }else if(classRoom.classHour.files.length && classRoom.classHour.files.length>0){
    activeName.value = 'second';
  }else{
    activeName.value = 'third';
  }
};

const view = (url:string) => {
  window.open(url);
};
const downFile = (url:string,filename:string) => {
  baseService.downloadOss(url,{},filename);
};
const downAnswerFile = () =>{
  if(userType == 3){
    let url ="/fii/front/question/down?tokenid="+getToken();
    baseService.download(url,{classRoomId:props.classRoom.classRoomId});
  }
};

const fullScreen = () => {
  // 全屏
  let de = document.getElementById("keynote");
  if (de.requestFullScreen) {                   // W3C
    de.requestFullscreen()
  } else if (de.mozRequestFullScreen) {          // FireFox
    de.mozRequestFullScreen()
  } else if (de.webkitRequestFullScreen) {       // Chrome等
    de.webkitRequestFullScreen()
  } else if (de.msRequestFullscreen) {          // IE11
    de.msRequestFullscreen();
  }
};

const tableData = [
  {
    name: "初级编程资料一",
    size: "11M",
  }
];

const tableHeight: Ref<Number> = ref(0);
nextTick(() => {
  tableHeight.value = document
    .querySelector(".global-table")
    ?.getBoundingClientRect().height;
});
</script>
<style scoped lang="scss">
.course-module {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.course-info {
  flex: auto;
  display: flex;
  flex-direction: column;
  .evaluate {
    margin: 23px 24px 0px;
    height: 80px;
    flex-shrink: 0;
    background: #eff6ff;
    border-radius: 6px;
    display: flex;
    align-items: center;
    padding: 0px 16px;
    justify-content: space-between;

    .text-name {
      text-align: left;

      .text {
        font-weight: bold;
        font-size: 18px;
      }

      .img {
        font-size: 14px;
        display: flex;
        align-items: center;
        margin-top: 8px;
        img {
          width: 18px;
          margin-right: 5px;
          height: 18px;
          margin-top: 2px;
        }
      }
    }

    .excel {
      cursor: pointer;
      width: 104px;
      line-height: 38px;
      background: #00a0e9;
      border-radius: 6px;
      font-size: 16px;
      color: #fff;
      text-align: center;
    }
  }
  .scholl-tabs {
    margin-top: 4px;
  }
  .video {
    flex: auto;
    display: flex;
    align-items: center;
    margin: 8px 24px 0px;
    video {
      width: 100%;
      min-height: 100%;
      background: black;
    }
  }
  .global-table {
    flex: auto;
    overflow-y: auto;
    margin: 8px 24px 0px;
    .el-table {
      max-height: 100%;
    }
    .slash {
      color: $color-primary;
      padding: 0px 5px;
      display: inline-block;
    }
    .folder {
      display: flex;
      align-items: center;
      img {
        width: 24px;
        height: 24px;
        margin-right: 8px;
      }
    }
  }
}
.guide {
  margin-top: 24px;
  display: flex;
  height: 193px;
  flex-direction: column;
  .title {
    padding: 15px 24px 16px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .name {
      font-size: 18px;
      display: flex;
      align-items: center;
      font-weight: bold;
      span.line {
        width: 4px;
        height: 12px;
        background: #00a0e9;
        display: inline-block;
        margin-right: 10px;
      }
    }
  }
  .desc {
    flex: auto;
    overflow-y: auto;
    margin-top: 10px;
    margin: 0px 24px;
  }
}

.iframe {
  min-height: calc(100vh - 30vh);
  width: 100%;
  border: 0;
}

</style>
